<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备工程月度报表系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1, h2, h3 {
            margin-bottom: 20px;
            color: #2c3e50;
        }
        
        .prototype-section {
            margin-bottom: 50px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        .prototype-title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .prototype-title i {
            margin-right: 10px;
            color: #3498db;
        }
        
        /* 布局组件 */
        .layout {
            display: flex;
            min-height: 600px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        }
        
        .sidebar {
            width: 220px;
            background: #2c3e50;
            color: white;
            padding: 20px 0;
        }
        
        .sidebar-header {
            padding: 0 20px 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #3d5166;
            font-size: 20px;
            font-weight: bold;
        }
        
        .sidebar-menu {
            list-style: none;
        }
        
        .sidebar-menu li {
            padding: 12px 20px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .sidebar-menu li:hover, .sidebar-menu li.active {
            background: #3d5166;
        }
        
        .sidebar-menu i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        .main-content {
            flex: 1;
            background: white;
            padding: 20px;
            overflow: auto;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .header-title {
            font-size: 24px;
            font-weight: bold;
        }
        
        /* 卡片组件 */
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
            border: 1px solid #eee;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .card-title {
            font-size: 16px;
            font-weight: bold;
            color: #555;
        }
        
        .card-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: #f0f7ff;
            color: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        .card-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .card-description {
            font-size: 14px;
            color: #888;
        }
        
        /* 图表容器 */
        .chart-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #eee;
        }
        
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: bold;
        }
        
        .chart-actions select, .chart-actions button {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            margin-left: 10px;
        }
        
        .chart-placeholder {
            height: 300px;
            background: #f9f9f9;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            border: 1px dashed #ddd;
        }
        
        /* 表格组件 */
        .table-container {
            width: 100%;
            overflow-x: auto;
            margin-bottom: 20px;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        th {
            background: #f9f9f9;
            font-weight: bold;
            color: #555;
        }
        
        tr:hover {
            background: #f5f7fa;
        }
        
        /* 表单组件 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .form-select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .btn {
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            border: none;
            font-size: 14px;
        }
        
        .btn-primary {
            background: #3498db;
            color: white;
        }
        
        .btn-secondary {
            background: #ecf0f1;
            color: #333;
        }
        
        .btn-success {
            background: #2ecc71;
            color: white;
        }
        
        .btn-danger {
            background: #e74c3c;
            color: white;
        }
        
        /* 标签页组件 */
        .tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
        }
        
        .tab.active {
            border-bottom: 2px solid #3498db;
            color: #3498db;
            font-weight: bold;
        }
        
        /* 数据源连接状态 */
        .connection-status {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        
        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .status-active {
            background: #2ecc71;
        }
        
        .status-inactive {
            background: #e74c3c;
        }
        
        .status-warning {
            background: #f39c12;
        }
        
        /* 模板预览 */
        .template-preview {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        
        .template-preview:hover {
            border-color: #3498db;
            background: #f0f7ff;
        }
        
        .template-preview.active {
            border-color: #3498db;
            background: #f0f7ff;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .layout {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                padding: 10px 0;
            }
            
            .card-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>设备工程月度报表系统原型</h1>
        
        <!-- 仪表盘 -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-tachometer-alt"></i>
                <h2>仪表盘</h2>
            </div>
            <div class="layout">
                <div class="sidebar">
                    <div class="sidebar-header">
                        <i class="fas fa-chart-line"></i> 设备工程报表系统
                    </div>
                    <ul class="sidebar-menu">
                        <li class="active"><i class="fas fa-tachometer-alt"></i> 仪表盘</li>
                        <li><i class="fas fa-cog"></i> 系统配置</li>
                        <li><i class="fas fa-chart-bar"></i> 综合专业</li>
                        <li><i class="fas fa-cogs"></i> 动专业</li>
                        <li><i class="fas fa-industry"></i> 静专业</li>
                        <li><i class="fas fa-bolt"></i> 电气专业</li>
                        <li><i class="fas fa-tachometer"></i> 仪表专业</li>
                        <li><i class="fas fa-file-word"></i> 报表生成</li>
                    </ul>
                </div>
                <div class="main-content">
                    <div class="header">
                        <div class="header-title">仪表盘</div>
                    </div>
                    
                    <div class="card-container">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">数据源状态</div>
                                <div class="card-icon"><i class="fas fa-database"></i></div>
                            </div>
                            <div class="card-value">5/5</div>
                            <div class="card-description">所有数据源连接正常</div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">KPI指标总数</div>
                                <div class="card-icon"><i class="fas fa-chart-line"></i></div>
                            </div>
                            <div class="card-value">48</div>
                            <div class="card-description">系统中监控的KPI指标数量</div>
                        </div>
                    </div>
                    
                    <div class="chart-container">
                        <div class="chart-header">
                            <div class="chart-title">数据源状态</div>
                        </div>
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>数据源名称</th>
                                        <th>API地址</th>
                                        <th>状态</th>
                                        <th>最后更新</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>综合专业API</td>
                                        <td>http://10.141.10.135:8001/KPI_ZhongYeMian/GetQYJData</td>
                                        <td>
                                            <div class="connection-status">
                                                <div class="status-indicator status-active"></div>
                                                正常
                                            </div>
                                        </td>
                                        <td>2024-05-15 08:30</td>
                                    </tr>
                                    <tr>
                                        <td>动专业API</td>
                                        <td>http://10.141.10.135:8001/KPI_ZhongYeMian/GetDZYData</td>
                                        <td>
                                            <div class="connection-status">
                                                <div class="status-indicator status-active"></div>
                                                正常
                                            </div>
                                        </td>
                                        <td>2024-05-15 08:30</td>
                                    </tr>
                                    <tr>
                                        <td>静专业API</td>
                                        <td>http://10.141.10.135:8001/KPI_ZhongYeMian/GetJZYData</td>
                                        <td>
                                            <div class="connection-status">
                                                <div class="status-indicator status-active"></div>
                                                正常
                                            </div>
                                        </td>
                                        <td>2024-05-15 08:30</td>
                                    </tr>
                                    <tr>
                                        <td>电气专业API</td>
                                        <td>http://10.141.10.135:8001/KPI_ZhongYeMian/GetDQZYData</td>
                                        <td>
                                            <div class="connection-status">
                                                <div class="status-indicator status-active"></div>
                                                正常
                                            </div>
                                        </td>
                                        <td>2024-05-15 08:30</td>
                                    </tr>
                                    <tr>
                                        <td>仪表专业API</td>
                                        <td>http://10.141.10.135:8001/KPI_ZhongYeMian/GetYBZYData</td>
                                        <td>
                                            <div class="connection-status">
                                                <div class="status-indicator status-active"></div>
                                                正常
                                            </div>
                                        </td>
                                        <td>2024-05-15 08:30</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 系统配置 -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-cog"></i>
                <h2>系统配置</h2>
            </div>
            <div class="layout">
                <div class="sidebar">
                    <div class="sidebar-header">
                        <i class="fas fa-chart-line"></i> 设备工程报表系统
                    </div>
                    <ul class="sidebar-menu">
                        <li><i class="fas fa-tachometer-alt"></i> 仪表盘</li>
                        <li class="active"><i class="fas fa-cog"></i> 系统配置</li>
                        <li><i class="fas fa-chart-bar"></i> 综合专业</li>
                        <li><i class="fas fa-cogs"></i> 动专业</li>
                        <li><i class="fas fa-industry"></i> 静专业</li>
                        <li><i class="fas fa-bolt"></i> 电气专业</li>
                        <li><i class="fas fa-tachometer"></i> 仪表专业</li>
                        <li><i class="fas fa-file-word"></i> 报表生成</li>
                    </ul>
                </div>
                <div class="main-content">
                    <div class="header">
                        <div class="header-title">系统配置</div>
                    </div>
                    
                    <div class="tabs">
                        <div class="tab active">综合专业配置</div>
                        <div class="tab">动专业配置</div>
                        <div class="tab">静专业配置</div>
                        <div class="tab">电气专业配置</div>
                        <div class="tab">仪表专业配置</div>
                    </div>
                    
                    <div class="form-actions" style="margin-bottom: 20px; justify-content: space-between;">
                        <div>
                            <button class="btn btn-primary"><i class="fas fa-plus"></i> 添加指标</button>
                            <button class="btn btn-secondary"><i class="fas fa-upload"></i> 导入配置</button>
                            <button class="btn btn-secondary"><i class="fas fa-download"></i> 导出配置</button>
                        </div>
                        <div>
                            <input type="text" placeholder="搜索指标..." style="padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 200px;">
                        </div>
                    </div>
                    
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>指标名称</th>
                                    <th>单位</th>
                                    <th>计算公式</th>
                                    <th>年度目标</th>
                                    <th>月度目标(月均)</th>
                                    <th>月度目标(实时)</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>设备原因引起的非计划停工次数</td>
                                    <td>次数</td>
                                    <td>SUM(月度数据)</td>
                                    <td>3</td>
                                    <td>0.25</td>
                                    <td>/</td>
                                    <td>
                                        <button class="btn btn-secondary btn-sm"><i class="fas fa-edit"></i></button>
                                        <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>设备事件数</td>
                                    <td>个数</td>
                                    <td>SUM(月度数据)</td>
                                    <td>9</td>
                                    <td>0.75</td>
                                    <td>/</td>
                                    <td>
                                        <button class="btn btn-secondary btn-sm"><i class="fas fa-edit"></i></button>
                                        <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>大检修装置一次开车成功率（含准时）</td>
                                    <td>%</td>
                                    <td>成功次数/总次数*100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>/</td>
                                    <td>
                                        <button class="btn btn-secondary btn-sm"><i class="fas fa-edit"></i></button>
                                        <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>管设备管运行指标报警次数</td>
                                    <td>次数</td>
                                    <td>SUM(月度数据)</td>
                                    <td>45</td>
                                    <td>3.75</td>
                                    <td>/</td>
                                    <td>
                                        <button class="btn btn-secondary btn-sm"><i class="fas fa-edit"></i></button>
                                        <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 添加指标弹窗 -->
                    <div style="margin-top: 30px; border: 1px dashed #ddd; padding: 20px; border-radius: 8px;">
                        <h3 style="margin-bottom: 20px;">添加/编辑指标</h3>
                        <div class="form-group">
                            <div class="form-label">指标名称</div>
                            <input type="text" class="form-control" placeholder="请输入指标名称">
                        </div>
                        <div class="form-group">
                            <div class="form-label">单位</div>
                            <input type="text" class="form-control" placeholder="请输入单位（可选）">
                        </div>
                        <div class="form-group">
                            <div class="form-label">计算公式</div>
                            <input type="text" class="form-control" placeholder="请输入计算公式">
                        </div>
                        <div class="form-group">
                            <div class="form-label">年度目标</div>
                            <input type="text" class="form-control" placeholder="请输入年度目标">
                        </div>
                        <div class="form-group">
                            <div class="form-label">月度目标(月均)</div>
                            <input type="text" class="form-control" placeholder="请输入月度目标(月均)">
                        </div>
                        <div class="form-group">
                            <div class="form-label">月度目标(实时)</div>
                            <input type="text" class="form-control" placeholder="请输入月度目标(实时)，可选">
                        </div>
                        <div class="form-actions">
                            <button class="btn btn-secondary">取消</button>
                            <button class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 综合专业 -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-chart-bar"></i>
                <h2>综合专业</h2>
            </div>
            <div class="layout">
                <div class="sidebar">
                    <div class="sidebar-header">
                        <i class="fas fa-chart-line"></i> 设备工程报表系统
                    </div>
                    <ul class="sidebar-menu">
                        <li><i class="fas fa-tachometer-alt"></i> 仪表盘</li>
                        <li><i class="fas fa-cog"></i> 系统配置</li>
                        <li class="active"><i class="fas fa-chart-bar"></i> 综合专业</li>
                        <li><i class="fas fa-cogs"></i> 动专业</li>
                        <li><i class="fas fa-industry"></i> 静专业</li>
                        <li><i class="fas fa-bolt"></i> 电气专业</li>
                        <li><i class="fas fa-tachometer"></i> 仪表专业</li>
                        <li><i class="fas fa-file-word"></i> 报表生成</li>
                    </ul>
                </div>
                <div class="main-content">
                    <div class="header">
                        <div class="header-title">综合专业数据</div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
                        <div>
                            <select class="form-select" style="display: inline-block; width: auto; margin-right: 10px;">
                                <option>2024年</option>
                                <option>2023年</option>
                                <option>2022年</option>
                            </select>
                            <button class="btn btn-primary"><i class="fas fa-search"></i> 查询</button>
                        </div>
                        <div>
                            <button class="btn btn-secondary"><i class="fas fa-download"></i> 导出数据</button>
                            <button class="btn btn-secondary"><i class="fas fa-sync-alt"></i> 刷新数据</button>
                        </div>
                    </div>
                    
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>指标名称</th>
                                    <th>单位</th>
                                    <th>年度目标</th>
                                    <th>1月</th>
                                    <th>2月</th>
                                    <th>3月</th>
                                    <th>4月</th>
                                    <th>5月</th>
                                    <th>6月</th>
                                    <th>7月</th>
                                    <th>8月</th>
                                    <th>9月</th>
                                    <th>10月</th>
                                    <th>11月</th>
                                    <th>12月</th>
                                    <th>累计</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>设备原因引起的非计划停工次数</td>
                                    <td>次数</td>
                                    <td>3</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>1</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>设备事件数</td>
                                    <td>个数</td>
                                    <td>9</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>1</td>
                                    <td>0</td>
                                    <td>0</td>
                                    <td>1</td>
                                    <td>1</td>
                                    <td>0</td>
                                    <td>1</td>
                                    <td>0</td>
                                    <td>2</td>
                                    <td>1</td>
                                    <td>7</td>
                                </tr>
                                <tr>
                                    <td>大检修装置一次开车成功率（含准时）</td>
                                    <td>%</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                </tr>
                                <tr>
                                    <td>管设备管运行指标报警次数</td>
                                    <td>次数</td>
                                    <td>45</td>
                                    <td>16</td>
                                    <td>17</td>
                                    <td>17</td>
                                    <td>16</td>
                                    <td>19</td>
                                    <td>18</td>
                                    <td>10</td>
                                    <td>12</td>
                                    <td>5</td>
                                    <td>22</td>
                                    <td style="color: red;">99</td>
                                    <td>23</td>
                                    <td style="color: red;">274</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 动专业 -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-cogs"></i>
                <h2>动专业</h2>
            </div>
            <div class="layout">
                <div class="sidebar">
                    <div class="sidebar-header">
                        <i class="fas fa-chart-line"></i> 设备工程报表系统
                    </div>
                    <ul class="sidebar-menu">
                        <li><i class="fas fa-tachometer-alt"></i> 仪表盘</li>
                        <li><i class="fas fa-cog"></i> 系统配置</li>
                        <li><i class="fas fa-chart-bar"></i> 综合专业</li>
                        <li class="active"><i class="fas fa-cogs"></i> 动专业</li>
                        <li><i class="fas fa-industry"></i> 静专业</li>
                        <li><i class="fas fa-bolt"></i> 电气专业</li>
                        <li><i class="fas fa-tachometer"></i> 仪表专业</li>
                        <li><i class="fas fa-file-word"></i> 报表生成</li>
                    </ul>
                </div>
                <div class="main-content">
                    <div class="header">
                        <div class="header-title">动专业数据</div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
                        <div>
                            <select class="form-select" style="display: inline-block; width: auto; margin-right: 10px;">
                                <option>2024年</option>
                                <option>2023年</option>
                                <option>2022年</option>
                            </select>
                            <button class="btn btn-primary"><i class="fas fa-search"></i> 查询</button>
                        </div>
                        <div>
                            <button class="btn btn-secondary"><i class="fas fa-download"></i> 导出数据</button>
                            <button class="btn btn-secondary"><i class="fas fa-sync-alt"></i> 刷新数据</button>
                        </div>
                    </div>
                    
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>指标名称</th>
                                    <th>单位</th>
                                    <th>年度目标</th>
                                    <th>1月</th>
                                    <th>2月</th>
                                    <th>3月</th>
                                    <th>4月</th>
                                    <th>5月</th>
                                    <th>6月</th>
                                    <th>7月</th>
                                    <th>8月</th>
                                    <th>9月</th>
                                    <th>10月</th>
                                    <th>11月</th>
                                    <th>12月</th>
                                    <th>累计</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>泵类设备故障率</td>
                                    <td>%</td>
                                    <td>0.5</td>
                                    <td>0.2</td>
                                    <td>0.3</td>
                                    <td>0.1</td>
                                    <td>0.2</td>
                                    <td>0.4</td>
                                    <td>0.3</td>
                                    <td>0.2</td>
                                    <td>0.1</td>
                                    <td>0.3</td>
                                    <td>0.2</td>
                                    <td>0.4</td>
                                    <td>0.3</td>
                                    <td>0.25</td>
                                </tr>
                                <tr>
                                    <td>压缩机故障率</td>
                                    <td>%</td>
                                    <td>0.3</td>
                                    <td>0.1</td>
                                    <td>0.0</td>
                                    <td>0.2</td>
                                    <td>0.1</td>
                                    <td>0.0</td>
                                    <td>0.1</td>
                                    <td>0.2</td>
                                    <td>0.0</td>
                                    <td>0.1</td>
                                    <td>0.0</td>
                                    <td>0.1</td>
                                    <td>0.0</td>
                                    <td>0.08</td>
                                </tr>
                                <tr>
                                    <td>动设备检修计划完成率</td>
                                    <td>%</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>98</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>99</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>98</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>99.6</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 静专业 -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-industry"></i>
                <h2>静专业</h2>
            </div>
            <div class="layout">
                <div class="sidebar">
                    <div class="sidebar-header">
                        <i class="fas fa-chart-line"></i> 设备工程报表系统
                    </div>
                    <ul class="sidebar-menu">
                        <li><i class="fas fa-tachometer-alt"></i> 仪表盘</li>
                        <li><i class="fas fa-cog"></i> 系统配置</li>
                        <li><i class="fas fa-chart-bar"></i> 综合专业</li>
                        <li><i class="fas fa-cogs"></i> 动专业</li>
                        <li class="active"><i class="fas fa-industry"></i> 静专业</li>
                        <li><i class="fas fa-bolt"></i> 电气专业</li>
                        <li><i class="fas fa-tachometer"></i> 仪表专业</li>
                        <li><i class="fas fa-file-word"></i> 报表生成</li>
                    </ul>
                </div>
                <div class="main-content">
                    <div class="header">
                        <div class="header-title">静专业数据</div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
                        <div>
                            <select class="form-select" style="display: inline-block; width: auto; margin-right: 10px;">
                                <option>2024年</option>
                                <option>2023年</option>
                                <option>2022年</option>
                            </select>
                            <button class="btn btn-primary"><i class="fas fa-search"></i> 查询</button>
                        </div>
                        <div>
                            <button class="btn btn-secondary"><i class="fas fa-download"></i> 导出数据</button>
                            <button class="btn btn-secondary"><i class="fas fa-sync-alt"></i> 刷新数据</button>
                        </div>
                    </div>
                    
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>指标名称</th>
                                    <th>单位</th>
                                    <th>年度目标</th>
                                    <th>1月</th>
                                    <th>2月</th>
                                    <th>3月</th>
                                    <th>4月</th>
                                    <th>5月</th>
                                    <th>6月</th>
                                    <th>7月</th>
                                    <th>8月</th>
                                    <th>9月</th>
                                    <th>10月</th>
                                    <th>11月</th>
                                    <th>12月</th>
                                    <th>累计</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>换热器检测完成率</td>
                                    <td>%</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                </tr>
                                <tr>
                                    <td>管道检测完成率</td>
                                    <td>%</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>98</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>98</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>99.7</td>
                                </tr>
                                <tr>
                                    <td>静设备检修计划完成率</td>
                                    <td>%</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 电气专业 -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-bolt"></i>
                <h2>电气专业</h2>
            </div>
            <div class="layout">
                <div class="sidebar">
                    <div class="sidebar-header">
                        <i class="fas fa-chart-line"></i> 设备工程报表系统
                    </div>
                    <ul class="sidebar-menu">
                        <li><i class="fas fa-tachometer-alt"></i> 仪表盘</li>
                        <li><i class="fas fa-cog"></i> 系统配置</li>
                        <li><i class="fas fa-chart-bar"></i> 综合专业</li>
                        <li><i class="fas fa-cogs"></i> 动专业</li>
                        <li><i class="fas fa-industry"></i> 静专业</li>
                        <li class="active"><i class="fas fa-bolt"></i> 电气专业</li>
                        <li><i class="fas fa-tachometer"></i> 仪表专业</li>
                        <li><i class="fas fa-file-word"></i> 报表生成</li>
                    </ul>
                </div>
                <div class="main-content">
                    <div class="header">
                        <div class="header-title">电气专业数据</div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
                        <div>
                            <select class="form-select" style="display: inline-block; width: auto; margin-right: 10px;">
                                <option>2024年</option>
                                <option>2023年</option>
                                <option>2022年</option>
                            </select>
                            <button class="btn btn-primary"><i class="fas fa-search"></i> 查询</button>
                        </div>
                        <div>
                            <button class="btn btn-secondary"><i class="fas fa-download"></i> 导出数据</button>
                            <button class="btn btn-secondary"><i class="fas fa-sync-alt"></i> 刷新数据</button>
                        </div>
                    </div>
                    
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>指标名称</th>
                                    <th>单位</th>
                                    <th>年度目标</th>
                                    <th>1月</th>
                                    <th>2月</th>
                                    <th>3月</th>
                                    <th>4月</th>
                                    <th>5月</th>
                                    <th>6月</th>
                                    <th>7月</th>
                                    <th>8月</th>
                                    <th>9月</th>
                                    <th>10月</th>
                                    <th>11月</th>
                                    <th>12月</th>
                                    <th>累计</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>电气设备故障率</td>
                                    <td>%</td>
                                    <td>0.4</td>
                                    <td>0.2</td>
                                    <td>0.1</td>
                                    <td>0.3</td>
                                    <td>0.2</td>
                                    <td>0.1</td>
                                    <td>0.0</td>
                                    <td>0.2</td>
                                    <td>0.1</td>
                                    <td>0.3</td>
                                    <td>0.2</td>
                                    <td>0.1</td>
                                    <td>0.2</td>
                                    <td>0.17</td>
                                </tr>
                                <tr>
                                    <td>变压器检测完成率</td>
                                    <td>%</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                </tr>
                                <tr>
                                    <td>电气设备检修计划完成率</td>
                                    <td>%</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>98</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>98</td>
                                    <td>99.7</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 仪表专业 -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-tachometer"></i>
                <h2>仪表专业</h2>
            </div>
            <div class="layout">
                <div class="sidebar">
                    <div class="sidebar-header">
                        <i class="fas fa-chart-line"></i> 设备工程报表系统
                    </div>
                    <ul class="sidebar-menu">
                        <li><i class="fas fa-tachometer-alt"></i> 仪表盘</li>
                        <li><i class="fas fa-cog"></i> 系统配置</li>
                        <li><i class="fas fa-chart-bar"></i> 综合专业</li>
                        <li><i class="fas fa-cogs"></i> 动专业</li>
                        <li><i class="fas fa-industry"></i> 静专业</li>
                        <li><i class="fas fa-bolt"></i> 电气专业</li>
                        <li class="active"><i class="fas fa-tachometer"></i> 仪表专业</li>
                        <li><i class="fas fa-file-word"></i> 报表生成</li>
                    </ul>
                </div>
                <div class="main-content">
                    <div class="header">
                        <div class="header-title">仪表专业数据</div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
                        <div>
                            <select class="form-select" style="display: inline-block; width: auto; margin-right: 10px;">
                                <option>2024年</option>
                                <option>2023年</option>
                                <option>2022年</option>
                            </select>
                            <button class="btn btn-primary"><i class="fas fa-search"></i> 查询</button>
                        </div>
                        <div>
                            <button class="btn btn-secondary"><i class="fas fa-download"></i> 导出数据</button>
                            <button class="btn btn-secondary"><i class="fas fa-sync-alt"></i> 刷新数据</button>
                        </div>
                    </div>
                    
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>指标名称</th>
                                    <th>单位</th>
                                    <th>年度目标</th>
                                    <th>1月</th>
                                    <th>2月</th>
                                    <th>3月</th>
                                    <th>4月</th>
                                    <th>5月</th>
                                    <th>6月</th>
                                    <th>7月</th>
                                    <th>8月</th>
                                    <th>9月</th>
                                    <th>10月</th>
                                    <th>11月</th>
                                    <th>12月</th>
                                    <th>累计</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>仪表设备故障率</td>
                                    <td>%</td>
                                    <td>0.3</td>
                                    <td>0.1</td>
                                    <td>0.2</td>
                                    <td>0.1</td>
                                    <td>0.0</td>
                                    <td>0.1</td>
                                    <td>0.2</td>
                                    <td>0.1</td>
                                    <td>0.0</td>
                                    <td>0.1</td>
                                    <td>0.2</td>
                                    <td>0.1</td>
                                    <td>0.11</td>
                                </tr>
                                <tr>
                                    <td>仪表校验完成率</td>
                                    <td>%</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                </tr>
                                <tr>
                                    <td>仪表设备检修计划完成率</td>
                                    <td>%</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>98</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>99.8</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 报表生成 -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-file-word"></i>
                <h2>报表生成</h2>
            </div>
            <div class="layout">
                <div class="sidebar">
                    <div class="sidebar-header">
                        <i class="fas fa-chart-line"></i> 设备工程报表系统
                    </div>
                    <ul class="sidebar-menu">
                        <li><i class="fas fa-tachometer-alt"></i> 仪表盘</li>
                        <li><i class="fas fa-cog"></i> 系统配置</li>
                        <li><i class="fas fa-chart-bar"></i> 综合专业</li>
                        <li><i class="fas fa-cogs"></i> 动专业</li>
                        <li><i class="fas fa-industry"></i> 静专业</li>
                        <li><i class="fas fa-bolt"></i> 电气专业</li>
                        <li><i class="fas fa-tachometer"></i> 仪表专业</li>
                        <li class="active"><i class="fas fa-file-word"></i> 报表生成</li>
                    </ul>
                </div>
                <div class="main-content">
                    <div class="header">
                        <div class="header-title">报表生成</div>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-label">选择报表模板</div>
                        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px;">
                            <div class="template-preview active">
                                <div style="font-weight: bold; margin-bottom: 5px;">设备工程年度报表</div>
                                <div style="color: #777; font-size: 12px;">包含所有专业数据的年度汇总报表</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-label">数据范围</div>
                        <div style="display: flex; gap: 20px;">
                            <div style="flex: 1;">
                                <select class="form-select">
                                    <option selected>年度数据</option>
                                </select>
                            </div>
                            <div style="flex: 1;">
                                <select class="form-select">
                                    <option>2024年</option>
                                    <option>2023年</option>
                                    <option>2022年</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-label">报表选项</div>
                        <div style="display: flex; gap: 20px;">
                            <div style="flex: 1;">
                                <div style="margin-bottom: 10px;">
                                    <input type="checkbox" id="include_charts" checked>
                                    <label for="include_charts">包含图表</label>
                                </div>
                                <div style="margin-bottom: 10px;">
                                    <input type="checkbox" id="include_tables" checked>
                                    <label for="include_tables">包含数据表格</label>
                                </div>
                            </div>
                            <div style="flex: 1;">
                                <div style="margin-bottom: 10px;">
                                    <input type="checkbox" id="include_summary" checked>
                                    <label for="include_summary">包含摘要</label>
                                </div>
                                <div style="margin-bottom: 10px;">
                                    <input type="checkbox" id="include_comparison">
                                    <label for="include_comparison">包含同比分析</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-label">报表文件名</div>
                        <input type="text" class="form-control" value="设备工程年度报表-2023年">
                    </div>
                    
                    <div class="form-actions">
                        <button class="btn btn-secondary">预览报表</button>
                        <button class="btn btn-primary">生成报表</button>
                    </div>
                    
                    <div style="margin-top: 30px;">
                        <div class="form-label">历史报表</div>
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>报表名称</th>
                                        <th>报表类型</th>
                                        <th>数据范围</th>
                                        <th>生成时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>设备工程年度报表-2023年</td>
                                        <td>年度报表</td>
                                        <td>2023年</td>
                                        <td>2024-01-10 14:30</td>
                                        <td>
                                            <button class="btn btn-secondary btn-sm"><i class="fas fa-eye"></i></button>
                                            <button class="btn btn-secondary btn-sm"><i class="fas fa-download"></i></button>
                                            <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>设备工程年度报表-2022年</td>
                                        <td>年度报表</td>
                                        <td>2022年</td>
                                        <td>2023-01-15 11:20</td>
                                        <td>
                                            <button class="btn btn-secondary btn-sm"><i class="fas fa-eye"></i></button>
                                            <button class="btn btn-secondary btn-sm"><i class="fas fa-download"></i></button>
                                            <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 报表预览 -->
        <div class="prototype-section">
            <div class="prototype-title">
                <i class="fas fa-file-alt"></i>
                <h2>报表预览</h2>
            </div>
            <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
                <div style="text-align: center; margin-bottom: 30px;">
                    <h2 style="margin-bottom: 10px;">设备工程月度报表</h2>
                    <h3>2024年5月</h3>
                </div>
                
                <div style="margin-bottom: 30px;">
                    <h3 style="margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;">1. 摘要</h3>
                    <p>本月设备运行总体情况良好，各项KPI指标基本达标。设备原因引起的非计划停工次数为0次，设备事件数为0次，大检修装置一次开车成功率为100%，管设备管运行指标报警次数为19次，略高于月度目标。</p>
                </div>
                
                <div style="margin-bottom: 30px;">
                    <h3 style="margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;">2. 综合专业KPI指标</h3>
                    <div style="height: 300px; background: #f9f9f9; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #aaa; border: 1px dashed #ddd; margin-bottom: 20px;">
                        <i class="fas fa-chart-line fa-3x"></i>
                    </div>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>指标名称</th>
                                    <th>单位</th>
                                    <th>年度目标</th>
                                    <th>月度目标</th>
                                    <th>本月值</th>
                                    <th>累计值</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>设备原因引起的非计划停工次数</td>
                                    <td>次数</td>
                                    <td>3</td>
                                    <td>0.25</td>
                                    <td>0</td>
                                    <td>1</td>
                                    <td><i class="fas fa-check-circle" style="color: #2ecc71;"></i></td>
                                </tr>
                                <tr>
                                    <td>设备事件数</td>
                                    <td>个数</td>
                                    <td>9</td>
                                    <td>0.75</td>
                                    <td>0</td>
                                    <td>7</td>
                                    <td><i class="fas fa-check-circle" style="color: #2ecc71;"></i></td>
                                </tr>
                                <tr>
                                    <td>大检修装置一次开车成功率（含准时）</td>
                                    <td>%</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                    <td>100</td>
                                </tr>
                                <tr>
                                    <td>管设备管运行指标报警次数</td>
                                    <td>次数</td>
                                    <td>45</td>
                                    <td>16</td>
                                    <td>17</td>
                                    <td>17</td>
                                    <td>16</td>
                                    <td>19</td>
                                    <td>18</td>
                                    <td>10</td>
                                    <td>12</td>
                                    <td>5</td>
                                    <td>22</td>
                                    <td style="color: red;">99</td>
                                    <td>23</td>
                                    <td style="color: red;">274</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div style="margin-bottom: 30px;">
                    <h3 style="margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;">3. 专业KPI指标汇总</h3>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>专业</th>
                                    <th>指标达标率</th>
                                    <th>主要问题</th>
                                    <th>改进措施</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>综合专业</td>
                                    <td>75%</td>
                                    <td>管设备管运行指标报警次数超标</td>
                                    <td>加强设备巡检，优化报警阈值</td>
                                </tr>
                                <tr>
                                    <td>动专业</td>
                                    <td>100%</td>
                                    <td>-</td>
                                    <td>-</td>
                                </tr>
                                <tr>
                                    <td>静专业</td>
                                    <td>100%</td>
                                    <td>-</td>
                                    <td>-</td>
                                </tr>
                                <tr>
                                    <td>电气专业</td>
                                    <td>100%</td>
                                    <td>-</td>
                                    <td>-</td>
                                </tr>
                                <tr>
                                    <td>仪表专业</td>
                                    <td>100%</td>
                                    <td>-</td>
                                    <td>-</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div>
                    <h3 style="margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;">4. 结论与建议</h3>
                    <p>本月各专业设备运行情况总体良好，但综合专业中管设备管运行指标报警次数超标，建议加强设备巡检频次，优化报警阈值设置，并对报警频繁的设备进行重点检查和维护。</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
